<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组件双向绑定</title>
    <script src="../vue.global.js"></script>
    <style>
        .red{
            color:red;
        }
        .font-big{
            font-size: 50px;
        }
    </style>
</head>
<body>

<div id="App">

    <html-a v-model:parent-msg="message"></html-a>

    <!--{{message}}-->

    <!--<input type="text" v-model="message">-->

    <!--<input type="text" v-bind:value="message" v-on:input="message=$event.target.value">-->
</div>


<script>


    const htmlA = {//子组件
        data(){  //数据
            return {
                message:"子组件hello"
            }
        },
       // props:['abc'],//组件通信
        props:['parentMsg'],//组件通信
        computed:{
            abc:{
                get(){
                    return this.parentMsg
                },
                set(v){
                    this.$emit('update:parentMsg',v);
                }
            }
        },
        //模板
        template:`
<div><input type="text" v-bind:value="parentMsg" v-on:input="$emit('update:parentMsg',$event.target.value)"></div>
<div><input type="text" v-bind:value="parentMsg" v-model="abc"></div>
<div>{{message}}</div>
<div>{{parentMsg}}</div>
`
    };

    const vm = Vue.createApp({  //根组件

        data(){
            return {
                message:"父组件hello"
            }
        },
        components:{
            'html-a':htmlA
        }
    });
    vm.mount("#App");


</script>
</body>
</html>